<template>
  <div class="mescroll-view">
    <div>
      <slot></slot>
      <div class="more cursor-pointer" v-if="showMoreBtn" @click="getMore">查看更多</div>
      <div v-else-if="total > 0" class="bottom">— 哎呀，这里是底部了啦 —</div>
    </div>
  </div>
</template>
<script>
// 引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  name: 'mescrollMore',
  props: {
    showMoreBtn: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    }
  },
  components: {
    MescrollVue
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    getMore() {
      this.$emit('getMoreData')
    }
  }
}
</script>
<style lang="less" scoped>
.mescroll-view {
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.mescroll-view::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.more {
  font-size: 14px;
  height: 40px;
  width: 80%;
  margin: 16px auto;
  text-align: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(44, 44, 44, 0.8);
  line-height: 40px;
  border-radius: 20px;
  border: 1px solid rgba(44, 44, 44, 0.1);
}
.bottom {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(44, 44, 44, 0.5);
  text-align: center;
  margin: 16px 0;
}
</style>